/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-01-12 09:35:49
 * @LastEditTime : 2023-07-20 17:05:52
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Admin\Admin.jsx
 * @Description  :
 */
import { Http } from '../../Common/Api'
import { project } from '../../Common/Data'
import { useEffect, useState } from 'react'
import { ConfigProvider } from 'antd'
import {
    useSessionStorageState,
    useLocalStorageState,
    useEventEmitter,
    useBoolean,
    useTitle,
    useFavicon,
    useRequest,
} from 'ahooks'

import './Scss/layoutStyle.scss'
import {
    BackImageUrl,
    WebThemeBackImage,
    temporaryData as DefaultTheme,
} from '../../Common/Router/MenuNav/DiyList/Theme/Common'

import { Head001 } from './Assembly/HeadList'
import { Menu001 } from './Assembly/MenuList'
import { Body001 } from './Assembly/BodyList'

const HeadList = { Head001 }

const MenuList = { Menu001 }

const BodyList = { Body001 }

const { hostname } = window.location
const { imageUrl, title } = project[hostname]

// 后台新版
const NewAdmin = () => {
    const [temporaryData] = useSessionStorageState('temporaryData')
    const { layoutStyle, backImage, themeColor } = temporaryData || DefaultTheme
    const [OpenUuid] = useSessionStorageState('OpenUuid')
    const [OpenMenuStatus, { toggle: OpenMenuStatusToggle }] = useBoolean(true)
    const [SelectMenus, setSelectMenus] = useState(OpenUuid || 'a0b4f6b8-ef44-4b43-925f-85a299eb52cb')
    const OpenMenuEvent = useEventEmitter()
    OpenMenuEvent.useSubscription(OpenMenuStatusToggle)
    const SelectMenusEvent = useEventEmitter()
    window.SelectMenusEvent = SelectMenusEvent
    SelectMenusEvent.useSubscription(val => {
        console.log('查看参数', val)
        setSelectMenus(val)
    })

    // 用户信息
    const [UserInfo] = useSessionStorageState('UserInfo')
    // redis 获取
    const [ClientData, setClientData] = useLocalStorageState('ClientData')

    const { runAsync: getOrganizationManagedorganizations } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            ClientData.organization = res.reduce((result, item) => ({ ...result, [item.value]: item.label }), {})
            setClientData(ClientData)
        },
    })

    const [AntdToken] = useState({
        colorLink: themeColor,
        colorPrimary: themeColor,
        colorBgElevated: 'rgba(247,247,247,.5)',
    })

    useEffect(() => {
        getOrganizationManagedorganizations({ url: 'getOrganizationManagedorganizations' })
    }, [getOrganizationManagedorganizations])

    return (
        <div className="AdminHome">
            <ConfigProvider theme={{ token: AntdToken }}>
                {(() => {
                    switch (layoutStyle) {
                        case 'ThemeTypeList001':
                            const HeadTemplate = HeadList['Head001']
                            const MenuTemplate = MenuList['Menu001']
                            const BodyTemplate = BodyList['Body001']
                            return (
                                <div className="layoutStyle001">
                                    {backImage ? (
                                        <img
                                            className="BackImage"
                                            src={BackImageUrl + WebThemeBackImage[backImage]}
                                            alt=""
                                        />
                                    ) : (
                                        <div className="BackColor" style={{ '--theme': themeColor }} />
                                    )}

                                    <HeadTemplate
                                        UserInfo={UserInfo}
                                        ClientData={ClientData}
                                        data={temporaryData || DefaultTheme}
                                        SelectMenusEvent={SelectMenusEvent}
                                    />
                                    <div className="layoutStyleBox">
                                        <MenuTemplate
                                            OpenMenuStatus={OpenMenuStatus}
                                            SelectMenusEvent={SelectMenusEvent}
                                            SelectMenus={SelectMenus}
                                        />
                                        <BodyTemplate
                                            OpenMenuStatus={OpenMenuStatus}
                                            OpenMenuEvent={OpenMenuEvent}
                                            SelectMenusEvent={SelectMenusEvent}
                                            SelectMenus={SelectMenus}
                                        />
                                    </div>
                                </div>
                            )
                        default:
                            return <div>等待布局</div>
                    }
                })()}
            </ConfigProvider>
        </div>
    )
}

const Admin = () => {
    useTitle(title)
    useFavicon(imageUrl + 'Ico.ico')
    return <NewAdmin />
}
export default Admin
